<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    :error="error"
    error-text="加载评论失败"
     @load="onLoad"
  >
     <!-- immediate-check="false" -->
    <!-- :title="item.content -->
    <van-cell v-for="(item, index) in list" :key="index">
      <commentItem
        :comment="item"
        @reply-click="$emit('reply-click', $event)"
      ></commentItem>
    </van-cell>
  </van-list>
</template>

<script>
import { getComment } from "@/api/comment";
import commentItem from "@/components/comment-item/index.vue";
export default {
  components: {
    commentItem,
  },
  data() {
    return {
      loading: false,
      finished: false,
      offset: null, //获取下一页数据的标志
      error: false,
      results: [],
    };
  },
  props: {
    source: {
      type: [Number, String, Object],
      required: true,
    },
    list: {
      type: Array,
      default: () => [],
    },
    type:{
      type:String,
      default:'a',
      validator(value){
        return ['a','c'].includes(value)
      }
    }
  },
  created() {
    this.loading=true
    // 在没到视图口的时候,触发一次加载请求,显示评论数量
    this.onLoad();
  },
  mounted() {
    console.log(this.results);
  },
  methods: {
    // 页面由用户滚动到视图触发
    async onLoad() {
      //  1请求获取数据
      // 2将数据添加到列表中
      // 3判断是否 还有数据
      // 4存在就更新下一页的数据
      // 5没有finnished设置false
      try {
        //  1请求获取数据
        const { data } = await getComment({
          type: this.type, //获取文章的评论,
          source: this.source.toString(), //源Id 文章或评论id
          offset: this.offset, //获取数据的偏移量
          limit: 10,
        });
        // 2将数据添加到列表中
        const { results } = data.data;
        this.list.push(...results);
        console.log(this.list, results);
        //把文章评论的总数传递到外部
        this.$emit("onload-success", data.data);
        console.log(data.data);
        // 将loading设置未false
        this.loading = false;
        // 4判断是否还未加载的数据
        if (results.length) {
          // 有就更新获取下一页的数据页面
          this.offset = data.data.last_id;
        } else {
          this.finished = true;
        }
      } catch (err) {
        this.error = true;
        console.log(err);
      }
    },
  },
};
</script>

<style>
</style>